<template>
	<view :style="{ '--color': color }">
		<accountDeal @business="show = true" Type="1" :accountInfo="accountInfo"></accountDeal>
		<view class="utabs">
			<u-tabs
				:list="list1"
				:scrollable="false"
				:activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle"
				lineColor="#333"
				@click="click"></u-tabs>
		</view>

		<view class="lists" v-for="(item, index) in pageData" :key="index">
			<text class="size30 out_trade_no ellipsis">单号：{{ item.out_trade_no }}</text>
			<text class="size28 m-top10">交易账户：{{ item.bankCard }}</text>
			<view class="eind m-top10">
				<view class="eili">金额：{{ item.money }}</view>
				<view class="eili">份数：{{ item.num }}</view>
				<view class="eili">手续费：{{ item.serviceMoney }}</view>
			</view>
			<text class="size26 m-top10">{{ item.add_date }}</text>
			<text class="State">{{ item.stateName }}</text>
		</view>
		<view class="rows m-top100" v-if="!pageData.length">
			<u-empty mode="list" text="暂无相关信息"></u-empty>
		</view>

		<buyTicket v-if="show" @Shut="Shut"></buyTicket>
		<!-- <paypass v-if="showPay" @Close="showPay = false"></paypass> -->
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import paypass from '../components/paypass.vue';
	export default {
		components: {
			paypass,
		},

		data() {
			return {
				list1: [
					{
						name: '全部',
						state: '',
					},
					{
						name: '待确定',
						state: 1,
					},
					{
						name: '已购买',
						state: 2,
					},
				],
				current: 0,
				show: false,
				showPay: false,

				payPassword: '',
				Finish: false,
				limit: 10,
				page: 1,
				getMore: true,
				accountInfo: '',
				pageData: [],
			};
		},
		onLoad() {
			this.getWenPiaoLog();
		},
		methods: {
			getWenPiaoLog() {
				this.$http
					.post({
						url: '/cqzmqmH5Api/getWenPiaoLog',
						data: {
							limit: this.limit,
							page: this.page,
							state: this.list1[this.current].state,
						},
					})
					.then((res) => {
						if (res.errcode != 100) return this.$Toast(res.msg);
						this.accountInfo = res.accountInfo;
						const result = res.data || [];
						this.page == 1
							? (this.pageData = result)
							: (this.pageData = [...this.pageData, result]);
						if (result.length < this.limit) this.getMore = false;
					});
			},
			playBtn() {
				if (!this.account) return;
				this.show = false;
				this.showPay = true;
			},

			click(e) {
				this.current = e.index;
				this.$pop.pageScrollTo();
				this.updata();
			},

			configPay() {
				this.$Toast('支付失败');
				this.payPassword = '';
				// this.showPay = false;
			},
			updata() {
				this.page = 1;
				this.getMore = true;
				this.getWenPiaoLog();
			},
			Shut() {
				this.show = false;
				this.getWenPiaoLog();
			},
		},
		computed: {
			...mapState(['color']),

			inactiveStyle() {
				return {
					color: '#333',
					fontSize: '28rpx',
				};
			},
			activeStyle() {
				return {
					color: '#000',
					fontSize: '30rpx',
				};
			},
		},
	};
</script>

<style lang="scss" scoped>
	.lists {
		width: 690rpx;
		padding: 24rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin: 24rpx auto 0;
		position: relative;
		display: flex;
		flex-direction: column;
		color: #333;
		font-size: 26rpx;
		.out_trade_no {
			padding-right: 150rpx;
		}
		.eind {
			display: grid;
			grid-template-columns: repeat(3, 1fr);

			.eili {
				font-size: 26rpx;
				color: #333;
			}

			.eili:nth-child(2) {
				display: flex;
				justify-content: center;
			}
		}

		.State {
			font-size: 36rpx;
			color: #000;
			position: absolute;
			top: 30rpx;
			right: 20rpx;
		}
	}
</style>